<template>
  <div class="gouwuche">
    <!-- ============================================================================ -->
    <!-- <div v-if="!$store.state.islogin">
      <van-nav-bar @click-left="fhy" title="购物详情" class="head" left-arrow />
      <div>
        <van-empty image="error" description="请登录">
          <van-button round type="danger" class="bottom-button" to="/login">
            登录
          </van-button>
        </van-empty>
      </div>
    </div> -->
    <!--  ==================================================================-->
    <!-- <div v-else> -->
    <div>
      <!-- {{ cc}} -->
      <!-- {{jsshopping}}   -->
      <!-- {{jsshopping}}     没有选择东西时为空--------------------------------------- -->
      <!-- <div v-if="my"> -->
      <div v-if="$store.state.jsshopping == 0">
        <!-- 导航栏 -->
        <van-nav-bar
          @click-left="fhy"
          title="购物详情"
          class="head"
          left-arrow
        />
        <!-- 中间空图片 -->
        <van-empty description="哇塞你的购物车清空了" />
        <!-- <van-button @click="ytl">有图了</van-button> -->
        <!-- 底部选项卡 --->
        <!-- <xrzp-tabbar></xrzp-tabbar> -->
      </div>
      <!-- 选择后底边的价格------------------------------------------------>
      <div v-else>
        <!-- {{$store.state.jsshopping}} -->
        <!-- <div v-if=""> -->
        <!-- else的头部 -->
        <van-nav-bar title="我的购物车" left-arrow @click-left="gwcLeft" />
        <van-checkbox-group v-model="outs" ref="sb">
          <!-- 卡片1 -->
          <!-- {{$store.state.jsshopping}} -->
          <!-- <van-swipe-cell  v-for="(item, i) of out" :key="i">$store.state.jsshopping -->
          <van-swipe-cell v-for="(item, i) of jsshopping" :key="i">
            <van-card
              tag="推荐"
              price="15.00"
              :num="item.count"
              :title="item.name"
              :thumb="item.pic"
            >
              <!--  :desc="item.xzs" -->
              <!-- 标签卡槽 -->
              <template #tags>
                <van-tag plain type="danger">好吃</van-tag>
                <van-tag plain type="danger">好玩</van-tag>
                <van-tag plain type="danger">好喝</van-tag>
              </template>
              <template #footer>
                <!-- <van-button size="mini" @click="jian(item)">-</van-button>
              <van-button size="mini" @click="jia(item)">+</van-button> -->
                <van-button size="mini" @click.prevent="jian(item)"
                  >-</van-button
                >
                <van-button size="mini" @click.prevent="jia(item)"
                  >+</van-button
                >
              </template>
              <template #bottom>
                <!-- 选择按钮 -->
                <!-- <van-checkbox :name="i" @click="gm(item)">购买</van-checkbox> -->
                <van-checkbox
                  v-model="item.is_checked"
                  :name="item"
                  @click.stop="gm(item)"
                  >购买</van-checkbox
                >
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="sc(i)"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox-group>
        <!-- 这是下边选项调试 -->

        <!-- 底部订单--------------------------------------------------------------------------- -->
        <van-submit-bar
          :price="total"
          button-text="提交订单"
          @submit="onSubmit"
        >
          <!-- <van-submit-bar :price="jsshopping.length*1500" button-text="提交订单" @submit="onSubmit"> -->
          <van-checkbox v-model="qx" @click.prevent="checkAll"
            >全选</van-checkbox
          >
          <!-- <template #tip>
              你的收货地址不支持同城送,
              <span @click="xgdz">修改地址</span>
            </template> -->
        </van-submit-bar>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
// import LoginVue from './Login.vue';
export default {
  data() {
    return {
      qx: false, //全选按钮
      outs: [], //所有按钮的双向绑定
      count: "",
      ybtn: "",
      // out: [
      //    },
      //   {id:2,sl: 1,jg: "10.00", bt: "皮蛋粥",xzs: "诗性",pic:require("../assets/wcf/logo1.png"),},
      //   {id:3,sl: 1,jg: "12.00",bt: "南瓜粥",xzs: "球球厨窝",pic:require("../assets/wcf/logo2.png"),},
      //   {id:4,sl: 1,jg: "15.00",bt: "玉米南瓜粥",xzs: "绿色天使",pic:require("../assets/wcf/11.jpg"),},
      //   {id:6,sl: 1,jg: "13.00",bt: "八宝粥", xzs: "冯逍遥",pic:require("../assets/wcf/logo4.png"),},
      //   {id:7,sl: 1,jg: "11.00",bt: "海参粥",xzs: "小厨飘香",tj: "推荐",tj1: "好吃",tj2: "好玩",tj3: "好喝",pic:require("../assets/wcf/logo6.png"),},
      // ],
      xsz: [],
    };
  },
  // 计算属性
  computed: {
    ...mapState(["jsshopping"]),
    total() {
      let total = 0;
      this.jsshopping.forEach((item) => {
        if (item.is_checked) {
          total += item.count * 1500;
        }
      });
      console.log(total);
      return total;
    },
  },

  //监听
  watch: {
    //监听outs里的按钮数量
    outs() {
      // console.log(this.outs)
      if (this.outs.length == this.jsshopping.length) {
        this.qx = true;
      } else {
        this.qx = false;
      }
    },
  },
  methods: {
    //购物车没有商品的时候
    fhy() {
      this.$router.go(-1);
    },
    // 有图后的左边是//////////////////
    gwcLeft() {
      // this.$router.push("/xiangqing")
      this.$router.go(-1);
      // history.go(-1)//和上面的一样
    },

    // 提交订单////////////////
    onSubmit() {
      this.$router.push("/wode");
    },
    // 修改地址//////////////
    // xgdz() {},

    //加
    jia(item) {
      item.count++;
    },
    //减
    jian(item) {
      if (item.count > 1) {
        item.count--;
      } else if (item.count <= 1) {
        this.sc(item);
      }
    },

    //追加一个属性
    zjyige() {
      this.jsshopping.forEach((item) => {
        this.$set(item, "count", 1);
        this.$set(item, "is_checked", false);
      });
      // 打印添加的属性
      // console.log(this.jsshopping)
    },

    // // 调试选项
    checkAll() {
      //如果没有全选这个按钮全选
      if (this.qx != false) {
        this.$refs.sb.toggleAll(true); //全选
        this.jsshopping.forEach((item) => {
          item.is_checked = true;
        });
      } else {
        this.$refs.sb.toggleAll(false); //不全选
        this.jsshopping.forEach((item) => {
          item.is_checked = false;
        });
      }
    },
    //删除
    sc(item) {
      this.jsshopping.splice(item, 1);
      // $store.state.jsshopping
      // console.log(this.jsshopping)
    },
    //购买
    gm(item) {
      // console.log(item.is_checked)
      if (item.is_checked == false) {
        item.is_checked = true;
      } else {
        item.is_checked = false;
      }
      // console.log(item.is_checked)
      // console.log(this.jsshopping)
    },
  },

  mounted() {
    this.zjyige();
  },
};
</script>
<style>
.gouwuche {
  margin-bottom: 60px;
}
/* 登录的样式 */
.gouwuche .bottom-button {
  width: 160px;
  height: 40px;
}
.gouwuche .delete-button {
  height: 100%;
}
</style>
